import { onMounted, toRefs } from 'vue'
import { useMapStore } from '@/stores/map.js'
import { storeToRefs } from 'pinia'
// const { map } = storeToRefs(useMapStore())
const { map } = toRefs(useMapStore())
let key = '9a0944e168ff74fd974d52ce60fbba87'
let num = Math.floor(Math.random() * 8)
if (num == 0) num++
/* -------------------------- 底图 ------------------------------ */
var TiandiMap_vec = new ol.layer.Tile({
  title: '天地图矢量图层',
  source: new ol.source.XYZ({
    // x表示切片x坐标，y表示切片的y坐标，l表示切片的缩放级别，必须添加xyz
    url: `http://t${num}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${key}`,
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var TiandiMap_cav = new ol.layer.Tile({
  title: '天地图矢量注记',
  source: new ol.source.XYZ({
    url: `http://t${num}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${key}`,
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var TiandiMap_img = new ol.layer.Tile({
  title: '天地图影像图层',
  source: new ol.source.XYZ({
    url: `http://t${num}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${key}`,
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var TiandiMap_cia = new ol.layer.Tile({
  title: '天地图影像注记',
  source: new ol.source.XYZ({
    url: `http://t${num}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${key}`,
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var Gaode_vec = new ol.layer.Tile({
  title: '高德地图-矢量底图',
  source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var Gaode_img = new ol.layer.Tile({
  title: '高德地图-卫星地图',
  source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
    wrapX: false,
    crossOrigin: 'Anonymous'
  })
})
var vectorMeasure = new ol.layer.Vector({
  title: '测量画布图层',
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    //图层样式
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)' //填充颜色
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33', //边框颜色
      width: 2 // 边框宽度
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    }),
    crossOrigin: 'Anonymous'
  })
})
var Zondy_docLayer = new Zondy.Map.Doc('', 'guanggu', { crossOrigin: 'Anonymous' })
/* -------------------------- 控件 ------------------------ */
// 设置导航控件
const ZoomToExtent = new ol.control.ZoomToExtent({
  extent: [114.34, 30.455, 114.41, 30.53] //左下, 右上
})
//实例化比例尺控件（ScaleLine）
const scaleLineControl = new ol.control.ScaleLine({})
// 鹰眼控件样式
const overviewMapControl = new ol.control.OverviewMap({
  className: 'ol-overviewmap ol-custom-overviewmap',
  /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
  collapseLabel: '\u00BB',
  /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
  label: '\u00AB',
  /* 初始为展开显示方式 */
  collapsed: false,
  view: new ol.View({
    projection: 'EPSG:4326',
    minZoom: 8,
    maxZoom: 18
  })
})
//实例化鼠标位置控件（MousePosition）
var mousePositionControl = new ol.control.MousePosition({
  //坐标格式
  coordinateFormat: ol.coordinate.createStringXY(4),
  //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
  projection: 'EPSG:4326',
  //坐标信息显示样式类名，默认是'ol-mouse-position'
  className: 'custom-mouse-position',
  //显示鼠标位置信息的目标容器
  target: document.getElementById('mouse-position'),
  //未定义坐标的标记
  undefinedHTML: '&nbsp;'
})
/* --------------------------- 挂载 -------------------------- */
const initMap = () => {
  onMounted(() => {
    map.value = new ol.Map({
      target: 'map',
      layers: [TiandiMap_vec, TiandiMap_cav, Zondy_docLayer],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [114.3839, 30.4917],
        zoom: 8,
        minZoom: 7,
        maxZoom: 18
      }),
      controls: ol.control
        // 清除右下角默认图标
        .defaults({ attributionOptions: { collapsible: true } })
        .extend([ZoomToExtent, scaleLineControl, overviewMapControl, mousePositionControl])
    })
  })
  // 1s后漫游
  setTimeout(() => {
    map.value.getView().animate({
      center: [114.3839, 30.4917],
      zoom: 13.4,
      duration: 2000
    })
  }, 1000)
}
export {
  initMap,
  TiandiMap_vec,
  TiandiMap_cav,
  TiandiMap_img,
  TiandiMap_cia,
  Zondy_docLayer,
  Gaode_vec,
  Gaode_img,
  vectorMeasure
}
